<template>
  <div :class="isShow ? 'musicController' : 'musicController isShow'">
    <div class="showMusicController" @click="handleShow"><i :class="isShow ? 'iconfont icon-xiangxia' : 'iconfont icon-xiangshang'"></i></div>
    <div class="container">
      <div class="musicInfo" v-if="Object.keys(musicDetail).length">
        <img :src="musicDetail.al.picUrl ? musicDetail.al.picUrl : '../../assets/images/tubiao.png'" :alt="musicDetail.al.name" @click="handleToPlayMusic(musicId)">
        <div class="detail">
          <p>{{musicDetail.name}}</p>
          <span v-for="ar in musicDetail.ar" :key="ar.id">{{ar.name}}</span>
        </div>
      </div>
      <div class="musicInfo" v-else>
        <img src="../../assets/images/tubiao.png" alt="logo">
      </div>
      <div class="controllerContainer">
        <div class="controller">
          <a href="javascript:;" @click="handleSwitchMusic(-1)"><i class="iconfont icon-shangyishoushangyige"></i></a>
          <a href="javascript:;" @click="handlePlayMusic"><i :class="isPlay ? 'iconfont icon-bofangzanting' : 'iconfont icon-24gl-play'"></i></a>
          <a href="javascript:;" @click="handleSwitchMusic(1)"><i class="iconfont icon-xiayigexiayishou"></i></a>
        </div>
        <div class="progressContainer">
          <div>{{currentTime}}</div>
          <div class="progress">
            <div class="line" :style="{width: progressWiidth}">
              <div class="point"></div>
            </div>
          </div>
          <div>{{duration}}</div>
        </div>
      </div>
      <div class="playInfo">
        <div class="showPlaylist">
          <a href="javascript:;" @click="isShowPlaylist = !isShowPlaylist"><i class="iconfont icon-gedan"></i></a>
          <div class="playlistContainer" v-show="isShowPlaylist">
            <div class="header">
              <span class="total">总{{playlist.length}}首</span>
              <span class="clear" @click="handleClearPlaylist">清空列表</span>
            </div>
            <table class="playlist"  v-if="playlist.length">
              <tr :class="item.musicId === musicId ? 'item active' : 'item'" v-for="(item, index) in playlist" :key="index">
                <td><i :class="item.musicId === musicId ? 'iconfont icon-paihangbang' : ''"></i></td>
                <td><span>{{item.musicDetail.name}}</span></td>
                <td>
                  <span v-for="ar in item.musicDetail.ar" :key="ar.id">{{ar.name}}</span>
                </td>
                <td><a href="javascript:;">X</a></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <audio v-if="musicUrl" ref="audio" :src="musicUrl" @canplay="getDuration" @timeupdate="updateTime" @ended="handleEnded"></audio>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  name: 'MusicController',
  data () {
    return {
      isShow: true,
      isShowPlaylist: false,
      progressWiidth: 0,
      currentTime: '00:00',
      duration: '00:00'
    }
  },
  computed: {
    ...mapState(['isPlay', 'musicId', 'musicUrl', 'musicDetail', 'playlist'])
  },
  watch: {
    isPlay () {
      console.log(this.isPlay)
      if (this.isPlay) {
        this.$nextTick(() => {
          this.$refs.audio.play()
        })
      } else {
        this.$nextTick(() => {
          this.$refs.audio.pause()
        })
      }
    },
    musicId () {
      console.log(this.musicId)
    }
  },
  methods: {
    handleShow () {
      this.isShow = !this.isShow
      this.isShowPlaylist = this.isShow ? this.isShowPlaylist : false
    },
    handleToPlayMusic (id) {
      this.$router.replace(`/music/${id}`)
      // window.location.href = `/music/${id}`
    },
    handleSwitchMusic (num) {
      if (!this.musicId) return
      this.$store.commit('changePlayState', false)
      const index = this.playlist.findIndex(item => {
        return item.musicId === this.musicId
      })
      this.initPlaylist(index + num)
      this.$nextTick(() => {
        this.$store.commit('changePlayState', true)
      })
    },
    handlePlayMusic () {
      if (!this.musicId) return
      this.$store.commit('changePlayState', !this.isPlay)
    },
    // 获取总时长
    getDuration () {
      this.duration = moment(this.$refs.audio.duration * 1000).format('mm:ss')
    },
    // 更新当前时长
    updateTime () {
      this.currentTime = moment(this.$refs.audio.currentTime * 1000).format('mm:ss')
      this.progressWiidth = (this.$refs.audio.currentTime / this.$refs.audio.duration) * 300 + 'px'
    },
    // 处理正常播放完成的后续
    handleEnded () {
      this.handleSwitchMusic(1)
    },
    // 清空播放列表
    handleClearPlaylist () {
      window.localStorage.clear('playlist')
      // 更新playlist播放列表
      this.$store.commit('updateMusicDetail')
    },
    // 如果播放列表有歌曲，可以直接播放
    initPlaylist (num) {
      if (this.playlist.length < 1) return
      if (num < 0) num = this.playlist.length - 1
      if (num >= this.playlist.length) num = 0
      const { musicId, musicDetail, musicUrl } = this.playlist[num]
      this.$store.commit('saveMusicId', musicId)
      this.$store.commit('saveMusicDetail', musicDetail)
      this.$store.commit('saveMusicUrl', musicUrl)
    }
  },
  created () {
    // 更新playlist播放列表
    this.$store.commit('updateMusicDetail')
    this.initPlaylist(0)
  }
}
</script>

<style lang="less" scoped>
.musicController{
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #242424;
  transition: bottom 0.4s;
  z-index: 99999;
}

.isShow{
  bottom: -70px;
}

.showMusicController{
  position: absolute;
  color: white;
  width: 50px;
  height: 30px;
  background-color: #242424;
  right: 50px;
  top: -30px;
  border-radius: 15px 15px 0 0;
  cursor: pointer;
  .iconfont{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.container{
  width: 1100px;
  height: 70px;
  margin: 0 auto;
  // background-color: aquamarine;
  // border-left: 2px solid white;
  // border-right: 2px solid white;
  color: #c1c1c1;
  a{
    color: #c1c1c1;
  }
  a:hover{
    color: #fff;
  }
  position: relative;
}

.controllerContainer{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  .controller{
    a{
      display: inline-block;
      padding: 5px;
      .iconfont{
        font-size: 24px;
      }
    }
    a:nth-child(2){
      margin: 0 60px;
    }
  }
  .progressContainer{
    div{
      display: inline-block;
      vertical-align: middle;
    }
    .progress{
      position: relative;
      width: 300px;
      height: 3px;
      margin: 0 15px;
      background-color: #cdcdcd;
      .line{
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 3px;
        background-color: #ff4e4e;
        .point{
          position: absolute;
          top: -3.5px;
          right: -10px;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: lightpink;
        }
      }
    }
  }
}

.musicInfo{
  max-width: 300px;
  // background-color: lightsalmon;
  overflow: hidden;
  img{
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    margin: 10px 20px 0 50px;
    cursor: pointer;
  }
  .detail{
    margin: 15px 0;
    float: left;
    p{
      color: #fff;
    }
    span{
      font-size: 14px;
      color: lightgrey;
    }
    span:not(:last-child)::after{
      content: " / ";
    }
  }
}

.playInfo{
  padding: 0 30px;
  // background-color: aquamarine;
  position: absolute;
  top: 0;
  right: 0;
  .showPlaylist{
    position: relative;
    // background-color: blueviolet;
    height: 70px;
    line-height: 70px;
    a{
      .iconfont{
        padding: 10px ;
        font-size: 20px;
      }
    }
    .playlistContainer{
      padding: 0 20px 20px;
      width: 410px;
      height: 380px;
      overflow: auto;
      line-height: 1;
      background-color: #242424;
      position: absolute;
      top: -400px;
      left: -380px;
      .header{
        position: sticky;
        top: 0;
        left: 0;
        padding: 20px 0 10px;
        border-bottom: 1px solid #eee;
        background-color: #242424;
        .clear{
          float: right;
          cursor: pointer;
        }
        .clear:hover{
          color: #fff;
        }
      }
      .playlist{
        width: 100%;
        margin-top: 10px;
        border-collapse: collapse;
        .item{
          td:last-child, td:first-child{
            width: 20px;
          }
          td{
            padding: 10px 0;
          }
        }
        .active{
          color: #c20c0c;
          font-weight: 600;
          // background-color: gray;
        }
      }
    }
  }
}

</style>
